<template>
	<view class="main">
		<my-navbar isBack></my-navbar>
		<!-- <list-item label="权利人" isCol @on-error="handleError('ql')">
			<view slot="content" class="content-box">
				<text>张三（500000XXXXXXXXX000）</text>
				<text>李四（500000XXXXXXXXX000）</text>
			</view>
		</list-item> -->
		<template v-for="item in fieldMetas">
			<list-item
				:label="item.Name"
				:content="record[item.Code]"
				:key="item.Id"
				v-if="item.Name !== 'Id' && item.Name !== 'Shape'"
				@on-error="handleError('common', item)"
			></list-item>
		</template>
		<list-item label="房屋照片" @on-error="handleError('fw')"><text slot="content" class="view-text" @click="handleError('fw')">查看</text></list-item>
		<view class="bottom-button">
			<view class="button-wrap">
				<view class="button-item"><u-button type="success" @click="showTestModal">信息无误</u-button></view>
				<view class="button-item"><u-button type="warning" @click="showTestModal">重新审核</u-button></view>
			</view>
			<view class="button-item"><u-button type="primary" @click="saveData">保存</u-button></view>
		</view>
		<!-- <list-item label="占地面积" :content="form.zdValue + 'm²'" @on-error="handleError('zd')"></list-item>
		<list-item label="建筑面积" :content="form.jzValue + 'm²'" @on-error="handleError('jz')"></list-item>
		<list-item label="层数" :content="form.csValue" @on-error="handleError('cs')"></list-item>
		<list-item label="坐落" content="21"></list-item>
		
		<list-item label="附件照片" :isError="false"><text slot="content" class="view-text" @click="handleError('fw')">查看</text></list-item>
		<list-item label="位置信息" :isError="false"><text slot="content" class="view-text" @click="handleError('fw')">查看</text></list-item> -->
		<!-- 纠错弹窗公共 -->
		<my-modal v-model="commonModal" :title="modalInfo.title" @confirm="onModalConfrim">
			<view class="modal-content">
				<view class="input-box">
					<input class="input" type="number" v-model="form[modalInfo.field]" :placeholder="'请输入' + modalInfo.title" v-if="modalInfo.type === 'Int'" />
					<input class="input" type="digit" v-model="form[modalInfo.field]" :placeholder="'请输入' + modalInfo.title" v-else-if="modalInfo.type === 'Double'" />
					<uni-datetime-picker type="datetime" v-model="form[modalInfo.field]" v-else-if="modalInfo.type === 'Date' || modalInfo.type === 'DateTime'" />
					<input class="input" type="text" v-model="form[modalInfo.field]" :placeholder="'请输入' + modalInfo.title" v-else="modalInfo.type === 'Text'" />
				</view>
			</view>
		</my-modal>
		<!-- 权利人 -->
		<my-modal-person v-model="qlModal"></my-modal-person>
		<!-- 占地面积弹窗 -->
		<my-modal v-model="zdModal" title="占地面积">
			<view class="modal-content">
				<view class="input-box">
					<input type="number" class="input" v-model="form.zdValue" placeholder="请输入面积" />
					<text>m²</text>
				</view>
			</view>
		</my-modal>
		<!-- 建筑面积弹窗 -->
		<my-modal v-model="jzModal" title="建筑面积">
			<view class="modal-content">
				<view class="input-box">
					<input type="number" class="input" v-model="form.jzValue" placeholder="请输入面积" />
					<text>m²</text>
				</view>
			</view>
		</my-modal>
		<!-- 层数 -->
		<my-modal v-model="csModal" title="层数">
			<view class="modal-content">
				<view class="input-box">
					<input type="number" class="input" v-model="form.csValue" placeholder="请输入层数" />
					<text>层</text>
				</view>
			</view>
		</my-modal>
		<!-- 产看房屋照片 -->
		<my-modal-photo title="房屋照片" v-model="fwModal" :iamges="houseImages" :houseId="pageId"></my-modal-photo>
	</view>
</template>

<script>
import ListItem from './list-item.vue';
import { apiRecord, apiLoadGridData } from '@/common/api.js';
import { showErrorTips } from '@/util/index.js';
export default {
	components: { ListItem },
	data() {
		return {
			qlModal: false,
			zdModal: false,
			jzModal: false,
			csModal: false,
			fwModal: false,
			commonModal: false,
			form: {},
			pageId: undefined,
			fieldMetas: [],
			record: {},
			modalInfo: {},
			houseImages: []
		};
	},
	onLoad(opt) {
		this.pageId = opt.id;
		this.init();
	},
	methods: {
		init() {
			this.getDetail();
			this.getHouseImage();
		},
		getDetail() {
			uni.showLoading();
			apiRecord({
				MorphologyId: 6113,
				id: this.pageId
			})
				.get()
				.then(res => {
					const { fieldMetas, record } = res;
					this.fieldMetas = fieldMetas;
					this.record = { ...record };
					this.form = { ...record };
					uni.hideLoading();
				})
				.catch(err => {
					uni.hideLoading();
					showErrorTips();
				});
		},
		getHouseImage() {
			apiLoadGridData({
				MorphologyId: 6109,
				GroupId: 4026,
				offset: 0,
				limit: 100,
				HouseId: this.pageId,
				order: 'asc'
			}).then(res => {
				this.houseImages = res.Items;
			});
		},
		saveData() {
			uni.showLoading();
			apiRecord({
				MorphologyId: 6112,
				id: this.pageId
			})
				.update(this.record)
				.then(res => {
					const { isSuccess } = res;
					if (isSuccess) {
						uni.showToast({
							title: '保存成功'
						});
						setTimeout(() => {
							this.init();
						}, 800);
					} else {
						showErrorTips('保存失败');
					}
					uni.hideLoading();
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		handleError(type, info = {}) {
			this.modalInfo = {
				title: info.Name,
				field: info.Code,
				type: info.FieldType
			};
			this[type + 'Modal'] = true;
		},
		onModalConfrim() {
			this.record = { ...this.form };
			this.commonModal = false;
		},
		showTestModal() {
			uni.showModal({
				title: '提示',
				content: '功能开发中...',
				showCancel: false
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-box {
	display: flex;
	flex-direction: column;
}

.view-text {
	color: $u-type-success;
	text-decoration: underline;
}

.modal-content {
	padding: $uni-spacing-row-lg;

	.input-box {
		display: flex;
		align-items: center;

		.input {
			flex: 1;
			border: 1px solid $u-border-color;
			padding: $uni-spacing-row-base $uni-spacing-row-lg;
			margin-right: $uni-spacing-row-lg;
			border-radius: $uni-border-radius-base;
			font-size: 32rpx;
		}
	}
}
.bottom-button {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: $uni-spacing-row-lg;
	.button-wrap {
		display: flex;
		align-items: center;
		margin-bottom: $uni-spacing-row-lg;
		.button-item {
			flex: 1;
			& + .button-item {
				margin-left: $uni-spacing-row-lg;
			}
		}
	}
}
</style>
